<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/reminder'">
            <div class="vs-search-box">
                <div class="vs-table-box">
                    <el-form ref="form" :inline="true" v-search-box-enter :model="paging" label-width="110px">
                        <el-form-item label="">
                            <div style="width: 400px">
                                <el-input placeholder="请输入姓名或手机号或会员卡号" clearable v-model="paging.keys">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                    <template slot="append">
                                        <div style="cursor: pointer" @click="search()">
                                            查找会员
                                        </div>
                                    </template>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="查询时间段：" style="margin-left: 20px">
                            <el-date-picker v-model="paging.date_start" type="daterange" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                style="width: 300px">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="">
                            <el-button @click="reset">重置</el-button>
                            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 发送短信这里有判断 的 三种 看设计图 -->
                <!-- <div>
					<el-button type="primary" @click="dialogVisible = true"
						>短信编辑模板</el-button
					>
					<el-button type="primary" @click="setSms()">发送短信</el-button>
					<el-button icon="el-icon-download" type="primary" @click="exportFile()">导出</el-button>
				</div> -->
            </div>
            <div class="vs-search-box">
                <el-table border ref="tableData" v-loading="loading" :data="tableData" style="width: 100%">
                    <el-table-column type="selection"> </el-table-column>
                    <el-table-column label="会员卡号" prop="vip_no"> </el-table-column>
                    <el-table-column label="姓名" prop="realname"> </el-table-column>
                    <el-table-column label="性别" prop="gender">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.gender == 1 ? "男" : "女" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" prop="phone"> </el-table-column>
                    <!-- 尾款金额 提醒时间 -->
                    <el-table-column label="尾款金额" prop="returnPrice"> </el-table-column>
                    <!-- 7-18 后端说:这个页面的提醒时间是怎么计算得来的也不清楚 估计还得问问客户 -->
                    <el-table-column label="提醒日期" prop="xxx">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="短信编辑模板" :visible.sync="dialogVisible" width="400px" :before-close="dialogBeforeClose"
            style="text-align: center">
            <div class="dialog_body">
                <div>短信模板内容</div>
                <div class="d_body">
                    <div>尊敬的</div>
                    <div>
                        <el-input type="textarea" v-model="birthday_content" placeholder=""
                            style="width: 250px"></el-input>
                        <div>祝你生日快乐!</div>
                    </div>
                </div>
            </div>
            <div slot="footer" style="margin-top: 20px">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="subContent()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { join } from 'mock/user';
export default {
    data() {
        return {
            birthday_content: "",
            form: {
            },
            paging: {
                page: 1,
                limit: 10,
                total: 0,
                keys: "",
                date_start: "",
                date_end: "",
            },
            dialogVisible: false,
            tableData: [],
        };
    },
    created() {
        this.getList();
    },
    mounted() { },
    filters: {
        rtBrithday(val) {
            if (val) {
                return val.split("-")[1] + "-" + val.split("-")[2];
            }
            return val;
        },
    },
    methods: {
        reset() {
            //重置
            this.paging = this.$options.data().paging
            this.handleCurrentChange(1);
        },
        //搜索
        search() {
            this.getList();
        },
        //更新短信模板
        async subContent() {
            let { code, data } = await this.$Http.setBirthdayContent({
                birthday_content: this.birthday_content,
            });
            if (code == 10000) {
                this.$message.success("编辑成功");
                this.dialogVisible = false;
            }
        },
        //导出文件
        async exportFile() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning("请选择您要导出的会员");
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            this.utils.exportFile(
                "store/user/exportBirthday",
                "会员生日提醒列表",
                arr.join(",")
            );
        },
        //发送短信
        async setSms() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning("请选择您要发送的会员");
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            let { code, data } = await this.$Http.setSms({
                ids: arr.join(","),
                type: 3, //3生日通知 ， 4 久未到店
            });
        },
        //列表
        async getList() {
            let obj = Object.assign({}, this.paging);
            if (obj.date_start) {
                obj.date_end = obj.date_start[1];
                obj.date_start = obj.date_start[0];
            } else {
                obj.date_end = "";
                obj.date_start = "";
            }
            this.loading = true;
            let { code, data } = await this.$Http.getReturn(obj);
            this.loading = false;
            if (code) {
                this.tableData = data;
                this.paging.total = data.total
            }
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-dialog__body {
        padding: 10px 20px;
        border-top: 1px solid rgba($color: #000000, $alpha: 0.2);
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.vs-table-box {
    display: flex;
}

.dialog_body {
    display: flex;
    flex-direction: column;
    text-align: left;

    >div:first-child {
        margin: 10px 0;
    }

    .d_body {
        display: flex;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        padding: 10px;

        >div:last-child {
            display: flex;
            flex-direction: column;
            margin: 0 20px;

            // .ipt_body {
            //   width: 250px ;
            //   height: 100px;
            //     border: 1px solid rgba($color: #000000, $alpha: .3);

            // }

            >div:last-child {
                margin-top: 20px;
                text-align: right;
            }
        }
    }
}
</style>
